import {
  getInterfaceInfo,
  invokeInterfaceInfo,
} from '@/services/phxz-backend/interfaceInfoController';
import { useParams } from '@@/exports';
import {
  Badge,
  Button,
  Card,
  Descriptions,
  DescriptionsProps,
  Divider,
  Form,
  FormProps,
  Input,
  message,
} from 'antd';
import React, { useEffect, useState } from 'react';
//import InterfaceInfo = API.InterfaceInfo;

const Item: React.FC = () => {
  const [loading, setLoading] = useState<API.InterfaceInfo>();
  const params = useParams();
  const [form] = Form.useForm();
  const [requestRes, setRequestRes] = useState<any>();
  const loadData = async () => {
    try {
      const res = await getInterfaceInfo({ id: Number(params.id) });
      setLoading(res.data);
    } catch (error: any) {
      message.error('请求失败:' + error.message);
    }
  };
  const onFinish: FormProps['onFinish'] = async (values) => {
    const hide = message.loading('调用中');
    try {
      const res = await invokeInterfaceInfo({
        id: Number(params.id),
        userRequestParams: values.requestParams,
      });
      hide();
      setRequestRes(res.data);
      message.info('调用成功');
    } catch (error: any) {
      message.error('调用失败:' + error.message);
    }
  };
  const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(() => {
    loadData();
  }, []);
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: 'name',
      children: loading?.name,
      span: 3,
    },
    {
      key: '2',
      label: 'description',
      children: loading?.description,
      span: 3,
    },
    {
      key: '3',
      label: 'method',
      children: loading?.method,
      span: 3,
    },
    {
      key: '4',
      label: 'requestParams',
      children: loading?.requestParams,
      span: 3,
    },
    {
      key: '5',
      label: 'requestHeader',
      children: loading?.requestHeader,
      span: 3,
    },

    {
      key: '6',
      label: 'responseHeader',
      children: loading?.responseHeader,
      span: 3,
    },
    {
      key: '7',
      label: 'url',
      children: loading?.url,
      span: 3,
    },
    {
      key: '8',
      label: 'Status',
      children: (
        <Badge
          status={loading?.status === 1 ? 'success' : 'error'}
          text={loading?.status === 1 ? '正常' : '关闭'}
        />
      ),
      span: 3,
    },
    {
      key: '9',
      label: 'createTime',
      children: loading?.createTime,
      span: 3,
    },
    {
      key: '10',
      label: 'updateTime',
      children: loading?.updateTime,
      span: 3,
    },
  ];
  return (
    <>
      <Descriptions title={loading?.name} bordered items={items} />
      <Divider></Divider>
      <Form layout="vertical" form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Form.Item label="请求参数" name="requestParams">
          <Input.TextArea autoSize={{ minRows: 4, maxRows: 20 }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            调用
          </Button>
        </Form.Item>
      </Form>
      <Card title="结果" bordered={false}>
        <p>{requestRes}</p>
      </Card>
    </>
  );
};

export default Item;
